<template>
    <el-row class="min-h-screen bg-gray-700 flex items-center justify-center">
        <el-col :span="24" class="flex items-center justify-center">
            <el-card class="bg-gray-500 p-4 shadow-lg rounded-lg" style="width: 380px;">
                <el-col class="flex items-center justify-center flex-col">
                    <div class="font-bold text-2xl text-light-700 mb-2">修改密码</div>
                    <el-form ref="formRef" :rules="rules" :model="form" class="w-full">
                        <el-form-item prop="old_password" class="justify-center mt-8">
                            <el-input type="password" v-model="form.old_password" placeholder="输入原密码" show-password>
                                <template #prefix>
                                    <el-icon><Lock /></el-icon>
                                </template>
                            </el-input>
                        </el-form-item>
                        
                        <el-form-item prop="new_password" class="justify-center mt-8">
                            <el-input type="password" v-model="form.new_password" placeholder="输入新密码" show-password>
                                <template #prefix>
                                    <el-icon><Lock /></el-icon>
                                </template>
                            </el-input>
                        </el-form-item>

                        <el-form-item class="flex justify-between">
                            <el-button round type="primary" class="w-[90px] ml-10 mr-8" @click="redactPassword">修改密码</el-button>
                            <el-button round type="primary" class="w-[90px]" @click="navigateToLogin">返回</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-card>
        </el-col>
    </el-row>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { Lock } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';
// import { modifyPassword } from '@/api/manager';
import { modifyPassword } from '@/api/manager';  
import { ElMessage } from 'element-plus'; 


const router = useRouter();
const formRef = ref(null);

const form = reactive({
    old_password: '',
    new_password: '',
});

const rules = {
    old_password: [{
        required: true,
        message: '旧密码不能为空',
        trigger: 'blur'
    }],
 
    new_password: [{
        required: true,
        message: '新密码不能为空',
        trigger: 'blur'
    }],
}

const redactPassword = async () => {
    if (!formRef.value) return;
    
    await formRef.value.validate(async (valid) => {
        if (!valid) return;
        
        try {
            const res = await modifyPassword({
                old_password: form.old_password,
                new_password: form.new_password
            });
            
            if (res.data?.code === '2000') {
                ElMessage.success('密码修改成功');
                localStorage.removeItem('token'); // 清除token
                router.push('/login');
            } else if (res.data?.code === '4001') {
                ElMessage.error('登录已过期，请重新登录');
                localStorage.removeItem('token'); // 清除无效token
                router.push('/login');
            } else {
                ElMessage.error(res.data?.message || '密码修改失败');
            }
        } catch (error) {
            console.error('修改密码错误:', error);
            if (error.response?.data?.code === '4001') {
                localStorage.removeItem('token');
                ElMessage.error('登录已过期，请重新登录');
                router.push('/login');
            } else {
                ElMessage.error('修改密码失败，请重试');
            }
        }
    });
};

// 返回首页  
const navigateToLogin = () => {  
    router.push('/'); 
};  
</script>  

<style scoped>  
.container {  
    min-height: 100vh;  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    background-color: #4b5563; /* 背景色 */  
}  
</style>
